<template>
  <div class="js-basic clearfix">
    <el-scrollbar style="height: 100%">
    <div class="main">
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">补全字符串</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            '1'.padStart(10, '0') // "0000000001"<br>
            '123456'.padStart(10, '0') // "0000123456"
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">提示字符串</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            '12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"<br>
            '09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">格式化输出Json/Array</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            JSON.stringify(data,null,2)
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">二进制换算</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            var number = 255;   // 十进制<br>
            var hexString = number.toString(2);   // 二进制<br>
            var hexString = number.toString(8);   // 八进制<br>
            var hexString = number.toString(16);   // 十六进制<br>
            parseInt(hexString, 16)    // 转回十进制<br>
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">文件请求</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            $('#test').load('/example/jquery/demo_test.txt’);<br>
            把文件 "demo_test.txt" 的内容加载到指定的div元素中<br>
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">url的编解码</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            编码：<br>
            encodeURIComponent(encodeURIComponent (" "));<br>
            解码:<br>
            decodeURIComponent(" ");
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">计算运算</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            数的绝对值: Math.abs(x)<br>
            对数进行四舍五入: Math.round(x)<br>
            对数进行上舍入: Math.ceil(x)<br>
            对数进行下舍入: Math.floor(x)<br>
            返回 x 和 y 中的最高值: Math.max(x,y)<br>
            返回 x 和 y 中的最低值: Math.min(x,y)<br>
            返回 0 和 1之间的随机数: Math.random()
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">获取时间</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
           var mydate = new Date();<br>
            mydate.getYear(); //获取当前年份(2位)<br>
            mydate.getFullYear(); //获取完整的年份(4位,1970-????)<br>
            mydate.getMonth(); //获取当前月份(0-11,0代表1月)<br>
            mydate.getDate(); //获取当前日(1-31)<br>
            mydate.getDay(); //获取当前星期X(0-6,0代表星期天)<br>
            mydate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)<br>
            mydate.getHours(); //获取当前小时数(0-23)<br>
            mydate.getMinutes(); //获取当前分钟数(0-59)<br>
            mydate.getSeconds(); //获取当前秒数(0-59)<br>
            mydate.getMilliseconds(); //获取当前毫秒数(0-999)<br>
            mydate.toLocaleDateString(); //获取当前日期<br>
            var mytime=mydate.toLocaleTimeString(); //获取当前时间<br>
            mydate.toLocaleString( ); //获取日期与时间<br>
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">Date格式化</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            Date.prototype.Format = function (fmt) {<br>
              var o = {<br>
                'M+': this.getMonth() + 1, // 月份<br>
                'd+': this.getDate(), // 日<br>
                'h+': this.getHours(), // 小时<br>
                'm+': this.getMinutes(), // 分<br>
                's+': this.getSeconds(), // 秒<br>
                'q+': Math.floor((this.getMonth() + 3) / 3), // 季度<br>
                'S': this.getMilliseconds()<br>
                // 毫秒<br>
              }<br>
              if (/(y+)/.test(fmt)) {<br>
                fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length))<br>
              }<br>
              for (var k in o) {<br>
                if (new RegExp('(' + k + ')').test(fmt)) {<br>
                  fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))<br>
                }<br>
              }<br>
              return fmt<br>
            }
          </code>
        </div>
      </el-card>
    </div>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  name: 'JsBasic'
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.js-basic{
  margin: 0 auto;
  overflow: hidden;
  .main{
    column-count: 2;
    column-gap:10px;
    padding: 10px;
  }
  .el-card{
    margin: 10px 0;
  }
  .el-card__header{
    padding: 0 10px;
    text-align: left;
    font-size: 14px;
    line-height: 30px;
    line-height: 30px;
  }
}
</style>
